body {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: 50px auto 20vh;
    background-color: #000;
    position: relative;

    video {
        position: absolute;
        left: 0;
        top:0;
        z-index: -1;
    }
    header {
        display: grid;
        grid-auto-flow: column;
        padding: 10px;
        align-items: center;
        grid-template-columns: 25px auto 25px;
        color: white;

        i.iconfont {
            font-size: 25px;
        }

        div {
            display: grid;
            justify-content: center;
            align-items: center;

            ul {
                display: grid;
                grid-auto-flow: column;
                gap: 20px;

                li {
                    font-size: 18px;
                    font-weight: 550;
                }
            }
        }
    }

    main {
        display: grid;
        grid-template: repeat(4, 70px)/60px;
        justify-content: end;
        align-content: end;
        justify-items: center;
        align-items: center;
        margin-right: 8px;
        gap: 10px;

        .icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
        }

        .zan,
        .pinglun,
        .zhuanfa {
            color: white;
            display: grid;
            align-items: center;
            justify-items: center;

            i.iconfont {
                font-size: 40px;
            }
        }
    }

    footer {
        position: relative;

        .info {
            color: white;
            width: 75%;
            padding: 0 8px;

            .move {
                display: grid;
                grid-auto-flow: column;
                padding: 10px 0;
                grid-template-columns: 10px 50px;

                i {
                    justify-self: center;
                    align-self: center;
                }

                .p {
                    margin-left: 20px;
                    display: block;
                    position: absolute;
                    overflow: hidden;
                    width: 200px;
                    white-space: nowrap;

                    div {
                        width: auto;
                        animation-name: word-move;
                        animation-duration: 8s;
                        animation-iteration-count: infinite;
                        animation-timing-function: linear;
                    }

                    @keyframes word-move {
                        0% {
                            transform: translateX(100%);
                        }

                        100% {
                            transform: translateX(-100%);
                        }
                    }
                }
            }

        }

        .bottom_menu {
            position: absolute;
            bottom: 0;
            padding: 10px;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            color: #ddd;
            grid-auto-flow: column;
            width: 100%;
            justify-items: center;
            align-items: center;

            div {
                font-size: 18px;
                font-weight: 550;
            }

            i.iconfont {
                font-size: 30px;
                font-weight: 550;
            }
        }

        .music {
            color: white;
            display: grid;
            position: absolute;
            right: 10px;
            top: 20px;

            .icon {
                border: solid 15px #333;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                overflow: hidden;
                box-shadow: 0 0 8px rgba(#fff, 0.1);
                animation-name: rotate;
                animation-iteration-count: infinite;
                animation-duration: 3s;
                animation-timing-function: linear;

                @keyframes rotate {
                    to {
                        transform: rotate(360deg);
                    }
                }
            }

            ul {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);

                li {
                    position: absolute;
                    animation-name: li-rotate;
                    animation-duration: 5s;
                    animation-iteration-count: infinite;
                    transform: scale(.7);
                    transform-origin: 10px -30px;

                    // transform: rotate(-50deg);
                    &:nth-child(2) {
                        animation-delay: 1.5s;
                        transform-origin: 15px -15px;
                    }

                    &:nth-child(3) {
                        animation-delay: 3s;
                        transform-origin: 5px -40px;
                    }
                }

                @keyframes li-rotate {
                    from {
                        opacity: 0;
                    }

                    50% {
                        opacity: 1;
                    }

                    to {
                        transform: scale(1.8) rotate(90deg);
                        opacity: 0;
                    }
                }
            }
        }
    }

    vedio {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        // z-index: -4;
    }
}